<template>
	<div class="hContent">
		<div class="hRight">
			<div class="hwine" v-for="item in items2">
				<h3 class="title"><a href="javascript:void(0)"></a>{{item.name}}</h3>
				<ul class="hwine_content">
					<li class="hwine_content_" v-for="i in item.mm">
						<a href="#/sales"><img :src='i.src' class="limg"  />{{i.title}}</a>
					</li>

				</ul>

			</div>
			

		</div>
	</div>

</template>

<script>
	import axios from 'axios'
	var sql = require('../../../../serve/mysql.js')
	
	export default {
		name: "Rcontent",
		data() {
			return {
				items2:[{
					name: "酒水",
					mm: [{
						src: require("../../../assets/wine/baojian.png"),
						title: "保健酒"
					}, {
						src: require("../../../assets/wine/baijiu.png"),
						title: "白酒"
					}, {
						src: require("../../../assets/wine/putaojiu.png"),
						title: "葡萄酒"
					}, {
						src: require("../../../assets/wine/yangjiu.png"),
						title: "洋酒"
					}, {
						src: require("../../../assets/wine/huangjiu.png"),
						title: "黄酒"
					}, {
						src: require("../../../assets/wine/pijiu.png"),
						title: "啤酒"
					}, {
						src: require("../../../assets/wine/shoucangjiu.png"),
						title: "收藏酒/老酒"
					}]
				}, {
					name: "休闲零食",
					mm: [{
						src: require("../../../assets/wine/jianguochaohuo.png"),
						title: "坚果炒货"
					}, {
						src: require("../../../assets/wine/mijianguopu.png"),
						title: "蜜饯果铺"
					}, {
						src: require("../../../assets/wine/binggangaodian.png"),
						title: "饼干糕点"
					}, {
						src: require("../../../assets/wine/tangguo.png"),
						title: "糖果巧克力"
					}, {
						src: require("../../../assets/wine/rougan.png"),
						title: "肉干果脯"
					}, {
						src: require("../../../assets/wine/qita.png"),
						title: "其他零食"
					}]
				}, ]
			}
	}	


	}
</script>

<style scoped>
	.hContent {
		width: 100%;
	}
	/*右内容*/
	
	.hRight {
		position: absolute;
		width: 74%;
		left: 23%;
		padding: 0.5rem;
		top: 38px;
		border-top: 1px solid #ccc;
	}
	
	.title {
		color: grey;
	}
	
	.hwine {
		margin-bottom: 0.2rem;
	}
	/*图片*/
	
	.hwine_content {
		padding-left: 0.7rem;
		display: flex;
		flex-wrap: wrap;
		margin-top: 0.5rem;
	}
	
	.hwine_content li {
		width: 30%;
		text-align: center;
		padding: 0.25rem 0;
		background: rgba(204, 204, 204, 0.2);
		transition: opacity 0.3s;
		display: inline-block;
		margin-top: 1.2%;
		margin-right: 0.7rem;
	}
	
	.limg {
		width: 5rem;
		margin: 0 auto;
		display: block;
	}
	
	.hwine_content li a {
		color: grey;
		text-decoration: none;
	}
</style>